<template>
  <eui-background type="common">
    <eui-navbar ref="EuiNavBar" :title="title" :storeName="sUserStoreName" :storeId="sUserStore" displayable="true" />
    <view class="footer-view" :style="{ height: listHeight + 'rpx' }">
      <scroll-view scroll-y="true" style="height: 100%;">
        <view class="list_cell">
          <view class="title-view">
            <text class="title-text">{{ RelatedBillData.c_id }}</text>
            <view class="temple-view" />
            <!-- 审核：[0]尚未审核 [2]预审核 [3]已审核 [5]已生效 [6]已结束 [7]已终止 [8]已完成 [9]已作废-->
            <!-- 审批：[1]尚未审批 [2]正在审批 [3]审批已通过 [4]审批未通过-->
            <eui-status v-if="RelatedBillData.c_status === '0' || RelatedBillData.c_status === '1'"
                        type="primary" :title="getStatus(RelatedBillData)" />
            <eui-status v-else-if="RelatedBillData.c_status === '2'" type="warning"
                        :title="getStatus(RelatedBillData)" />
            <eui-status
                v-else-if="RelatedBillData.c_status === '3' || RelatedBillData.c_status === '5' || RelatedBillData.c_status === '8'"
                type="success" :title="getStatus(RelatedBillData)" />
            <eui-status
                v-else-if="RelatedBillData.c_status === '4' || RelatedBillData.c_status === '6' || RelatedBillData.c_status === '7'"
                type="error" :title="getStatus(RelatedBillData)" />
            <eui-status v-else-if="RelatedBillData.c_status === '9'" type="invalid"
                        :title="getStatus(RelatedBillData)" />
          </view>
          <view class="item-view">
            <view v-for="(optionItem, optionIndex) in dataOptions" :key="optionIndex"
                  class="item-detail-view" :style="{ width: optionItem.occupy ? '100%' : '50%' }">
              <text v-if="optionItem.label" class="item-text">{{ optionItem.label }}</text>
              <text class="item-text item-text-detail">{{ RelatedBillData[optionItem.name] }}</text>
            </view>
          </view>
        </view>

        <view class="card" v-for="(detailItem,detailIndex) in RelatedBillDetailData" :key="detailIndex">
          <view class="finish-content">{{detailItem.c_gds_name}}</view>
          <view class="barcode-text">{{detailItem.c_barcode}}</view>
          <view class="item-view" style="padding:16rpx 0rpx 20rpx 28rpx">
            <view v-for="(optionItem, optionIndex) in dataOptions2" :key="optionIndex"
                  class="item-detail-view" :style="{ width: detailItem.occupy ? '100%' : '50%' }">
              <text v-if="optionItem.label" class="item-text">{{ optionItem.label }}</text>
              <text class="item-text item-text-detail">{{ detailItem[optionItem.name] }}</text>
            </view>
          </view>
          <view style="background: #F9FAFC;border-radius: 10rpx;margin:0rpx 28rpx">
            <view class="item-view" style="padding:20rpx 28rpx">
              <view v-for="(optionItem, optionIndex) in dataOptions3" :key="optionIndex"
                    class="item-detail-view" :style="{ width: detailItem.occupy ? '100%' : '50%' }">
                <text v-if="optionItem.label" class="item-text">{{ optionItem.label }}</text>
                <text class="item-text item-text-detail">{{ detailItem[optionItem.name] }}</text>
              </view>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
    <view class="bottom-view">
      <view class="center-style">
        <eui-button type="max2" title="保存" singleTag="保存" @buttonClick="buttonClick"
                    :disabled="!(mainData.c_status == '0' && detailData.length > 0)"/>
        <view class="gap-view" />
        <eui-button type="max" title="审核" singleTag="审核" @buttonClick="buttonClick"
                    :disabled="!(mainData.c_status == '0' && detailData.length > 0)"/>
      </view>
    </view>
  </eui-background>
</template>

<script setup type="ts">
import {onMounted, ref, reactive} from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { validateStores, validateGds, defaultMapping, validateStoresAndWno  } from '@/hooks/useValidateMethod';
import { todayAdd, formatNow } from '@/hooks/useUtils';
import service from "@/common/service";
import {getRdsUrl, rdsRequest, rdsRequestAsync} from '@/hooks/rdsServices';
import { calcAtInByPt, validateOddLot, round, calcPtInByPtPay, calcPetpayByPtPay } from '@/hooks/useCalculateMethod';
import { useMainStore } from "@/store/modules/store";
import { useLoginStore } from "@/store/modules/useLoginStore";
import { getRelatedName, getDictName, getUserDictSelectList, getDictSelect, getDictSelectList, getWeightUnits } from '../../components/RelatedName.js';
import { init, getRdsUserDepartAuthority, getRdsSysConfig } from '@/hooks/init';
import dateRangUtil from "@/common/dateRangUtil";
import { validateAdnoLevel } from '@/hooks/useBillInfo';
import Enjoy from "@/common/enjoy";
import { getDcStoreInfo } from '@/hooks/useDcStoreInfo';

const rdsUrl = getRdsUrl();
const isOpened = ref('none');
const mainStore = useMainStore();
const LoginStore = useLoginStore();
const listHeight = ref(300);
const oriHeight = ref(300);
const noteStyle = ref('white-space: nowrap;overflow: hidden;text-overflow: ellipsis');
const c_id = ref(''); //单据号
const sUserStore = ref('');
const sUserStoreName = ref('');
const sUser = ref('');
const isCurrentGds = ref([]);
const title = ref('关联单据');
const c_sku_rec = ref(0);  //已录品种数
const c_n_rec = ref(0);  //已录总数量
const height = ref(0);
const width = ref(0);
const c_disabled = ref(false);
const c_status = ref('0');
const c_gcode = ref('');
const searchText = ref('');
const selectType = ref('');
const detailData = ref([]);
const listManager = ref([]);
let delList = reactive([]);
let newList = reactive([]);
let modifiedList = reactive([]);
const currentGds = ref({});
const currentGdsIndex = ref(0);
const RelatedBillData = ref(
    {
      c_id: 'BS02212070001',
      c_status: '0',
      c_out_store_name: '[088949]小王子商贸有限公司',
      c_adno_name: '[01]昂捷信息',
      c_wno_name: '[02]本部',
      c_bhqx: '普通补货',
      c_apply_money: 601.00,
      c_create_info: '[0676]小陈   2023-11-08 10:05:30'
    }
)
const dataOptions = ref([
  { label: "机构", name: "c_out_store_name", occupy: true },
  { label: "部门", name: "c_adno_name" },
  { label: "仓库", name: "c_wno_name" },
  { label: "补货权限", name: "c_bhqx" },
  { label: "申请金额", name: "c_apply_money" },
  { label: "录入", name: "c_create_info", occupy: true },
])
const RelatedBillDetailData = ref([
      {
        c_gds_name:'[023003]陕西洛川苹果',
        c_barcode:'6920024552825',
        c_adno_name: '[111]水果',
        c_logistics_type: '直送',
        c_class_name: '[111012]苹果',
        c_yk_type: '无',
        c_bz_unit:'1.000/KG',
        c_js_ls:'6/0.000',
        c_apply_count:36.000,
        c_fee_count:0.000,
        c_ys_count:36.000,
        c_settle_money:936.000
      },
      {
        c_gds_name:'[023004]山东烟台苹果',
        c_barcode:'6920024557865',
        c_adno_name: '[111]水果',
        c_logistics_type: '直送',
        c_class_name: '[111012]苹果',
        c_yk_type: '无',
        c_bz_unit:'2.000/KG',
        c_js_ls:'6/2.000',
        c_apply_count:39.000,
        c_fee_count:2.000,
        c_ys_count:44.000,
        c_settle_money:1936.000
      },
    ]
)
const dataOptions2 = ref([
  { label: "部门", name: "c_adno_name" },
  { label: "物流方式", name: "c_logistics_type" },
  { label: "品类", name: "c_class_name" },
  { label: "越库类型", name: "c_yk_type" },
])
const dataOptions3 = ref([
  { label: "包装/单位", name: "c_bz_unit" },
  { label: "件数/零数", name: "c_js_ls" },
  { label: "申请数量", name: "c_apply_count" },
  { label: "赠品数量", name: "c_fee_count" },
  { label: "验收数量", name: "c_ys_count" },
  { label: "结算金额", name: "c_settle_money" },
])
const mainData = ref({
  c_tenant_id: '',
  c_id: '',
  c_bill_type: '501',
  c_status: '0',
  c_mk_type: '3',
  c_gmode: '',
  c_property_group: '',
  c_pal_kind: '1',//进货损溢
  c_pal_flag: '1',//报损
  c_store_id: sUserStore.value,
  c_store_name: sUserStoreName.value,
  c_rec_store_type: '',
  c_wno: '00',
  c_wname: '本部',
  c_adno: '',
  c_org_no: '',
  c_req_userno: sUserStore.value,
  c_charge_userno: '',
  c_send_wms: '',
  c_send_wms_dt: null,
  c_n_l: 0,
  c_at_pay_l: 0,
  c_aet_pay_l: 0,
  c_at_cost_l: 0,
  c_aet_cost_l: 0,
  c_at_sale_l: 0,
  c_mk_store_id: sUserStore.value,
  c_mk_store_name: sUserStoreName.value,
  c_mk_dt: dateRangUtil.formatDate(new Date(),'YYYY-MM-DD HH:mm:ss'),
  c_mk_userno: sUser.value,
  c_approve_status: '1',
  c_approve_dt: null,
  c_au_dt: null,
  c_au_userno: '',
  c_void_dt: null,
  c_void_userno: '',
  c_print_dt: null,
  c_print_userno: '',
  c_print_n: 0,
  c_orig_id: '',
  c_orig_type: '',
  c_src_id: '',
  c_src_type: '',
  c_note: '',
  c_sys_note: '',
  c_n_p: 0,
  c_at_pay_p: 0,
  c_aet_pay_p: 0,
  c_at_cost_p: 0,
  c_aet_cost_p: 0,
  c_at_sale_p: 0,
  c_req_priv: '0',
  c_req_fast: '0',
  c_expect_dt: null,
});

onMounted(() => {
  getListHeight()
})

// 获取列表高度
const getListHeight = async () => {
  await uni.getSystemInfo({
    success: function (res) { // res - 各种参数
      let info = uni.createSelectorQuery().select(".footer-view");
      info.boundingClientRect(function (data) { //data - 各种参数
        //获取列表高度
        let height = res.windowHeight - data.top;
        //转换rpx
        let finalHeight = height / (res.windowWidth / 750) - 100;
        listHeight.value = finalHeight;
        oriHeight.value = finalHeight;
      }).exec()
    }
  });
};

const getStatus = (item) => {
  // 审核：[0]尚未审核 [2]预审核 [3]已审核 [5]已生效 [6]已结束 [7]已终止 [8]已完成 [9]已作废
  // 审批：[1]尚未审批 [2]正在审批 [3]审批已通过 [4]审批未通过
  switch (item.c_status) {
    case '0':
      return '尚未审核';
    case '1':
      return '尚未审批';
    case '2':
      return '预审核';
    case '3':
      return '已审核';
    case '4':
      return '审批未通过';
    case '5':
      return '已生效';
    case '6':
      return '已结束';
    case '7':
      return '已终止';
    case '8':
      return '已完成';
    case '9':
      return '已作废';
  }
}

onLoad(async (option) => {
  RelatedBillData.value.c_id = option.BillId;
})
const buttonClick = async (t) => {
  const { loginInfo } = mainStore;
  let { singleTag } = t;
  switch (singleTag) {
    case '保存':
      break;
    case '审核':
      break;
    case '关闭':
      break;
    case '确认':
      break;
  }
}

// 获取单据详情信息
const billQuery = async (type) => {
  if (!mainData.value.c_id) {
    return;
  }
  service.enjoyShowLoading('正在加载...');
  const req = {
    BillId: mainData.value.c_id,
  };
  const result = await rdsRequest(rdsUrl.scApi, '商品补货申请单', 'EnjoyBillQuery', req, '501');
  if (result.ds.length > 0) {
    mainData.value = result.ds[0];
    detailData.value = result.ds1;
    detailData.value.forEach(x => {
      x.rowType = 0;
    })
    title.value = mainData.value.c_id + '详情';
    c_sku_rec.value = detailData.value.length || 0;
    c_n_rec.value = detailData.value.reduce((pre, current) => pre + (current.c_n ?? 0), 0);
  } else {
    uni.showToast({
      duration: 2000,
      icon: 'none',
      title: '未查询到数据',
      mask: true,
    });
  }
}

const getName = (key, value) => {
  if (!value) {
    return ''
  }
  let list = [];
  value.split(',').map(item => {
    list.push("[" + item + "]" + (getRelatedName(key, item) || key));
  })
  return list.join(',');
}

</script>

<style lang="scss" scoped>
@import '../../../../main.scss';
.top-view {
  width: 100%;
  height: 88rpx;
}
.extra-view {
  margin-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 100%;
}
.footer-view {
  width: 100%;
  flex: 1;
}
.list-scroll {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.bottom-view {
  width: 100%;
  height: 100rpx;
  background: #FFFFFF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}
.center-style {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 20rpx;
  //gap: 20rpx;
}
.gap-view {
  width: 20rpx;
  height: auto;
}
//关联单据
.list_cell {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  background: $uni-bg-color-inverse;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 28rpx;
  overflow: hidden;
}
//标题行
.title-view {
  display: flex;
  width: 100%;
  height: 46rpx;
  flex-direction: row;
  align-items: center;
  //margin-bottom: 24rpx;
}
.card {
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 20rpx 0rpx 20rpx 0rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
}
.title-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level3;
  font-size: $uni-font-size-level1;
  color: $uni-text-color-primary;
  line-height: 45rpx;
  text-align: left;
  font-style: normal;
  margin-top: 0;
}
.temple-view {
  flex: 1;
}
//内容行
.item-view {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.item-detail-view {
  width: 50%;
  /* 每列宽度为50% */
  height: 42rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item-text {
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  font-size: $uni-font-size-level4;
  color: $uni-text-color-hint;
  line-height: 37px;
  text-align: left;
  font-style: normal;
  margin-right: 16rpx;
  width: auto;
}

.item-text-detail {
  color: $uni-text-color-primary;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finish-content {
  font-size: 30rpx;
  color: #000000;
  line-height: 42rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  padding: 0rpx 0rpx 0rpx 28rpx;
}
.barcode-text{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
  padding:0rpx 0rpx 0rpx 28rpx
}
</style>
